<meta name="csrf-token" content="{{ csrf_token() }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="/css/app22.css">
<script src="/js/fileinput.js" type="text/javascript"></script>
<script src="/js/jquery.form.js" type="text/javascript"></script>
<script src="/js/fileinput_locale_zh.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/rem.js"></script>
<link rel="stylesheet" type="text/css" href="/css/swiper.min.css"/>
<script type="text/javascript" src="/js/swiper.min.js"></script>
<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/index.css')}}">
<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/reset.style.css')}}">
<script src="{{URL::asset('vendor/element-ui/ext/vue.js')}}"></script>
<script src="{{URL::asset('vendor/element-ui/lib/index.js')}}"></script>
<div id="myVue"></div>
<div style="margin-bottom: 20px;">
	<a href="../admin/handle_entrance" class="btn btn-primary btn-lg active" role="button"><返回</a>
</div>
<div style="margin-bottom: 20px;text-align: center;">
	<a href="../admin/to_handle_ques?dep={{$dep}}&ques_status=all" class="btn btn-success" role="button">全部 <span class="badge">{{$total_ques_num}}</span></a>
	<a href="../admin/to_handle_ques?dep={{$dep}}&ques_status=changqi" class="btn btn-info" role="button">长期 <span class="badge">{{$changqi_ques_num}}</span></a>
	<a href="../admin/to_handle_ques?dep={{$dep}}&ques_status=yuqi" class="btn btn-danger" role="button">逾期 <span class="badge">{{$yuqi_ques_num}}</span></a>
</div>
<div id="main" style="margin-left: 15px;margin-right: 15px;">
<div id="list">
  <ul>
   @foreach ($ques_list as $key => $value)
    <li>
      <div>
        <label style="font-size: 16px;">
          	{{$ques_list[$key]->id}} 、 
          	@if(empty($ques_list[$key]->ques_title))
          	{{$ques_list[$key]->xc_res_id}}
          	@elseif($ques_list[$key]->xc_res_id=='')
          	{{$ques_list[$key]->ques_title}}
          	@endif
          	@if($ques_list[$key]->is_changqi=='1'&&date('Y-m-d H:i:s')<$ques_list[$key]->end_date)
              	<span style="color: red;">【长期处理中({{date('Y-m-d',strtotime($ques_list[$key]->end_date))}})】</span>
            @endif
          	@if($ques_list[$key]->is_changqi=='1'&&date('Y-m-d H:i:s')>$ques_list[$key]->end_date)
              	<span style="color: red;">【逾期未处理{{date('Y-m-d',strtotime($ques_list[$key]->end_date))}}】</span>
            @endif
        </label>

      </div>
      <p class="text-muted" style="word-break: break-all;margin-right: 10px;margin-left: 16px;">{{$ques_list[$key]->ques_desc}}</p>
      <p>问题种类：{{$ques_list[$key]->type_name}}</p>
      <div>
        异常描述：<textarea class="form-control" rows="5" disabled>{{$ques_list[$key]->xc_desc}}</textarea>
      </div>
      
      <div class="po-cmt">
        <div class="po-hd">
          <div class="post">
            异常图片：
            @if(is_null($ques_list[$key]->ques_img))
            	<p style="color: red;">他很懒，没有上传异常图片！</p>
            @else
                <p>
                @for($i=0; $i < count(explode(";", $ques_list[$key]->ques_img)); $i++)
                  <img class="list-img" src="{{explode(';', $ques_list[$key]->ques_img)[$i]}}" style="height: 80px;">
                @endfor
                </p>
            @endif
          </div>
        </div>
      </div>
      @if($ques_list[$key]->is_changqi=='1')
      <p style="padding-top: 20px;">预计完成日期：{{date('Y-m-d',strtotime($ques_list[$key]->end_date))}}</p>
      <div>
        长期解决办法：<textarea class="form-control" rows="5" disabled>{{$ques_list[$key]->changqi_desc}}</textarea>
      </div>
      <div class="po-cmt">
        <div class="po-hd">
          <div class="post">
            长期处理图片：
            @if(is_null($ques_list[$key]->changqi_img))
            	<p style="color: red;">他很懒，没有上传异常图片！</p>
            @else
                <p>
                @for($i=0; $i < count(explode(";", $ques_list[$key]->changqi_img)); $i++)
                  <img class="list-img" src="{{explode(';', $ques_list[$key]->changqi_img)[$i]}}" style="height: 80px;">
                @endfor
                </p>
            @endif
          </div>
        </div>
      </div>
      @endif
      @if(in_array($ques_list[$key]->dep_id,$can_handle)||in_array(1,$can_handle))
      <div>
      	@if($ques_list[$key]->is_changqi=='0')
      	<div>
        	<input style="font-size: 13px;height: 30px;margin-top: 25PX;" type="button" class="btn btn-primary col-xs-3" name="" id="changqi_btn_{{$ques_list[$key]->id}}" value="转长期">
      	</div>
      	@endif
      	<div>
        	<input style="background-color:#b53131;font-size: 30px;float: right;margin-top: 20px;" type="button" class="btn btn-primary col-xs-8" name="" id="todo_btn_{{$ques_list[$key]->id}}" value="准备处理">
      	</div>
      </div>
      @endif
      <form action="ques_handle_save/{{$ques_list[$key]->id}}" method="post" enctype="multipart/form-data" id="my_form_{{$ques_list[$key]->id}}">
      	<input type="hidden" name="_token" value="{{ csrf_token() }}" />
        <!-- <div id="do_area_{{$ques_list[$key]->id}}" style="display: none;">
          解决办法：<textarea class="form-control" rows="3" id="textarea_{{$ques_list[$key]->id}}" name="handle_desc_{{$ques_list[$key]->id}}"></textarea>
          上传处理成功图片：<input id="handle_img_{{$ques_list[$key]->id}}" name="handle_img_{{$ques_list[$key]->id}}[]" type="file" multiple class="file" data-overwrite-initial="false"  accept="image/*">
        </div>
        <div id="changqi_area_{{$ques_list[$key]->id}}" style="display: none;">
            预计完成日期：<input class="form-control" type="date" name="end_date_{{$ques_list[$key]->id}}">
            解决办法：<textarea class="form-control" rows="3" id="changqi_desc_{{$ques_list[$key]->id}}" name="changqi_desc_{{$ques_list[$key]->id}}"></textarea>
            上传图片：<input id="changqi_img_{{$ques_list[$key]->id}}" name="changqi_img_{{$ques_list[$key]->id}}[]" type="file" multiple class="file" data-overwrite-initial="false" accept="image/*">
        </div> -->
        <div style="margin-top: 20px;display: none;" id="submit_btn_area_{{$ques_list[$key]->id}}">
          <input style="background-color:#b53131;font-size: 30px;" type="button" class="btn btn-primary btn-block" id="btn_{{$ques_list[$key]->id}}"   value="提&nbsp;&nbsp;交">
          <strong style="color: red;">提示：每处理完一条异常都需要点击⬆的提交按钮</strong>
        </div>   
      </form>
    </li>
    <div class="fengexian" style="height: 2px;background-color: #b53131;margin-top: 20px;"></div>
    <script>
    	$("#changqi_btn_{{$ques_list[$key]->id}}").click(function(){
    		var changqi_area = "<div id='changqi_area_{{$ques_list[$key]->id}}' style='display: none;'>预计完成日期：<input class='form-control' type='date' name='end_date_{{$ques_list[$key]->id}}'>解决办法：<textarea class='form-control' rows='3' id='changqi_desc_{{$ques_list[$key]->id}}' name='changqi_desc_{{$ques_list[$key]->id}}'></textarea>上传图片：<input id='changqi_img_{{$ques_list[$key]->id}}' name='changqi_img_{{$ques_list[$key]->id}}[]' type='file' multiple class='file' data-overwrite-initial='false' accept='image/*'></div>";
    		$("#submit_btn_area_{{$ques_list[$key]->id}}").before(changqi_area);
    		$("#changqi_img_{{$ques_list[$key]->id}}").fileinput({
				showUpload: false,
				// uploadUrl: 'save.php?action=upload', 
				language: 'Zh',
				uploadAsync: false,
				dropZoneEnabled: false,
				maxFilesNum: 10,
				showCaption: false,
				showPreview: true,
				showRemove: false,
				showCancel:false,
				previewFileType: "image",
				browseClass: "btn btn-info btn-block",
				browseLabel: "选择图片",
				// browseIcon: "<i class=\"glyphicon glyphicon-picture\"></i> ",
				removeFromPreviewOnError:true,                //当文件不符合规则，就不显示预览
				initialCaption: "请拍照上传异常详情图片",//文本框初始话value
				allowedFileExtensions: ["jpg", "jpeg", "gif", "png","bmp"],
				previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
				msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
			});
    	});
    	$("#todo_btn_{{$ques_list[$key]->id}}").click(function(){
    		var todo_area = "<div id='do_area_{{$ques_list[$key]->id}}' style='display: none;'>解决办法：<textarea class='form-control' rows='3' id='textarea_{{$ques_list[$key]->id}}' name='handle_desc_{{$ques_list[$key]->id}}'></textarea>上传处理成功图片：<input id='handle_img_{{$ques_list[$key]->id}}' name='handle_img_{{$ques_list[$key]->id}}[]' type='file' multiple class='file' data-overwrite-initial='false'  accept='image/*'></div>";
    		$("#submit_btn_area_{{$ques_list[$key]->id}}").before(todo_area);
    		$("#handle_img_{{$ques_list[$key]->id}}").fileinput({
				showUpload: false,
				// uploadUrl: 'save.php?action=upload', 
				language: 'Zh',
				uploadAsync: false,
				dropZoneEnabled: false,
				maxFilesNum: 10,
				showCaption: false,
				showPreview: true,
				showRemove: false,
				showCancel:false,
				previewFileType: "image",
				browseClass: "btn btn-info btn-block",
				browseLabel: "选择图片",
				// browseIcon: "<i class=\"glyphicon glyphicon-picture\"></i> ",
				removeFromPreviewOnError:true,                //当文件不符合规则，就不显示预览
				initialCaption: "请拍照上传异常详情图片",//文本框初始话value
				allowedFileExtensions: ["jpg", "jpeg", "gif", "png","bmp"],
				previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
				msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
			});
    	});
		$('#btn_{{$ques_list[$key]->id}}').click(function(){
			if($("#changqi_desc_{{$ques_list[$key]->id}}").length>0){
				if ($("#changqi_desc_{{$ques_list[$key]->id}}").val()=='') {
					rc.msg.alert("请输入长期解决办法！","错误",function(){
						// $("#changqi_desc_{{$ques_list[$key]->id}}").css("color","red");
						$("#changqi_desc_{{$ques_list[$key]->id}}")[0].focus();
					});
				}else{
					$('#btn_{{$ques_list[$key]->id}}').removeAttr('disabled');
					$.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
					$('#my_form_{{$ques_list[$key]->id}}').ajaxSubmit({
						beforeSubmit:function(){
							let myVue = new Vue({
								el:"#myVue",
								mounted:function() {
									const loading = this.$loading({
										lock: true,
										text: '正在提交……',
										spinner: 'el-icon-loading',
										background: 'rgba(0, 0, 0, 0.7)'
									});
								}
							})
						},
						
						complete: function(xhr) {//完成
							rc.msg.alert("处理成功！","提示信息",function(){
	                			location.reload();
							});
		            	}
	            	});
				}
			}
			
			if ($("#textarea_{{$ques_list[$key]->id}}").length>0) {
				if ($("#textarea_{{$ques_list[$key]->id}}").val()=='') {
					rc.msg.alert("请输入长期解决办法！","错误",function(){
						// $("#textarea_{{$ques_list[$key]->id}}").css("border-color","red");
						$("#textarea_{{$ques_list[$key]->id}}")[0].focus();
					});
				}else{
					$('#btn_{{$ques_list[$key]->id}}').removeAttr('disabled');
						$.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
						$('#my_form_{{$ques_list[$key]->id}}').ajaxSubmit({
							beforeSubmit:function(){
								let myVue = new Vue({
									el:"#myVue",
									mounted:function() {
										const loading = this.$loading({
											lock: true,
											text: '正在提交……',
											spinner: 'el-icon-loading',
											background: 'rgba(0, 0, 0, 0.7)'
										});
									}
								})
							},
							
							complete: function(xhr) {//完成
								rc.msg.alert("处理成功！","提示信息",function(){
		                			location.reload();
								});
			            	}
	            		});
				}
			}
		});

		$("#changqi_btn_{{$ques_list[$key]->id}}").click(function(){
			$("#todo_btn_{{$ques_list[$key]->id}}").css('display',"none");
			$("#changqi_btn_{{$ques_list[$key]->id}}").css('display',"none");
			$("#changqi_area_{{$ques_list[$key]->id}}").css('display',"block");
			$("#submit_btn_area_{{$ques_list[$key]->id}}").css('display',"block");
		})
		$("#todo_btn_{{$ques_list[$key]->id}}").click(function(){
			$("#changqi_btn_{{$ques_list[$key]->id}}").css('display',"none");
			$("#todo_btn_{{$ques_list[$key]->id}}").css('display',"none");
			$("#do_area_{{$ques_list[$key]->id}}").css('display',"block");
			$("#submit_btn_area_{{$ques_list[$key]->id}}").css('display',"block");
		})
		
		
		$(document).ready(function(){
		/*调起大图 S*/
		var mySwiper = new Swiper('.swiper-container2', {
		    loop: false,
		    pagination: '.swiper-pagination2',
		    })
		$("#list").on("click", ".post img", 
		function() {
		    var imgBox = $(this).parents(".post").find("img");
		    //alert(imgBox);
		    var i = $(imgBox).index(this);
		    //alert(i);
		    $(".big_img .swiper-wrapper").html("")

		    for(var j = 0 ,c = imgBox.length; j < c ;j++){
		     $(".big_img .swiper-wrapper").append('<div class="swiper-slide"><div class="cell"><img src="' + imgBox.eq(j).attr("src") + '" / ></div></div>');
		    }
		    mySwiper.updateSlidesSize();
		    mySwiper.updatePagination();
		    $(".big_img").css({
		        "z-index": 1001,
		        "opacity": "1"
		    });
		    mySwiper.slideTo(i, 0, false);
		    return false;
		});

		$(".big_img").on("click", 
			function() {
			    $(this).css({
			        "z-index": "-1",
			        "opacity": "0"
			    });
			});
		});
    </script>
    @endforeach
  </ul>
</div>
</div>
<div class="big_img">
<div class="swiper-container2">
  <div class="swiper-wrapper"> </div>
</div>
</div>
<script type="text/javascript">
	var rc = window.rc || {};
	rc.msg = {
	    alert: function(message, title, callback) {
	        if (title == null) title = "提示信息";
	        rc.msg._show(title,
	            message,
	            null,
	            "alert",
	            function(result) {
	                if (callback) callback(result);
	            });
	    },
	    confirm: function(message,title, callback) {
	        if (title == null) title = "操作确认";
	        rc.msg._show(title,
	            message,
	            null,
	            "confirm",
	            function(result) {
	                if (callback) callback(result);
	            });
	    },
	    _show: function(title, msg, value, type, callback) {
	        var html = "";
	        html += '<div id="mb_box"></div><div id="mb_con"><span id="mb_tit">' + title + "</span>";
	        html += '<div id="mb_msg">' + msg + '</div><div id="mb_btnbox">';
	        if (type == "alert") {
	            html += '<input id="mb_btn_ok" type="button" value="确定" />';
	        }
	        if (type == "confirm") {
	            html += '<input id="mb_btn_no" type="button" value="取消" />';
	            html += '<input id="mb_btn_ok" type="button" value="确定" />';
	        }
	        html += "</div></div>";
	 
	        //必须先将_html添加到body，再设置Css样式  
	        $("body").append(html);
	        rc.msg.initCss();
	 
	        switch (type) {
	        case "alert":
	            $("#mb_btn_ok").click(function() {
	                rc.msg._hide();
	                callback(true);
	            });
	            $("#mb_btn_ok").focus().keypress(function(e) {
	                if (e.keyCode == 13 || e.keyCode == 27) {
	                    $("#mb_btn_ok").trigger("click");
	                }
	            });
	            break;
	        case "confirm":
	            $("#mb_btn_ok").click(function() {
	                rc.msg._hide();
	                if (callback) callback(true);
	            });
	            $("#mb_btn_no").click(function() {
	                rc.msg._hide();
	                if (callback) callback(false);
	            });
	            $("#mb_btn_no").focus();
	            $("#mb_btn_ok, #mb_btn_no").keypress(function(e) {
	                if (e.keyCode == 13) $("#mb_btn_ok").trigger("click");
	                if (e.keyCode == 27) $("#mb_btn_no").trigger("click");
	            });
	            break;
	        }
	    },
	    _hide: function() {
	        $("#mb_box,#mb_con").remove();
	    },
	    initCss: function() {
	        $("#mb_box").css({
	            width: "100%",
	            height: "100%",
	            zIndex: "99999",
	            position: "fixed",
	            filter: "Alpha(opacity=60)",
	            backgroundColor: "black",
	            top: "0",
	            left: "0",
	            opacity: "0.6"
	        });
	 
	        $("#mb_con").css({
	            zIndex: "999999",
	            width: "350px",
	            height: "200px",
	            position: "fixed",
	            backgroundColor: "White",
	        });
	 
	        $("#mb_tit").css({
	            display: "block",
	            fontSize: "14px",
	            color: "#444",
	            padding: "10px 15px",
	            backgroundColor: "#fff",
	            borderRadius: "15px 15px 0 0",
	            fontWeight: "bold",
	            "border-bottom": "1px solid #ddd"
	        });
	 
	        $("#mb_msg").css({
	            padding: "20px",
	            lineHeight: "40px",
	            textAlign: "center",
	            fontSize: "18px",
	            color: "#4c4c4c"
	        });
	 
	        $("#mb_ico").css({
	            display: "block",
	            position: "absolute",
	            right: "10px",
	            top: "9px",
	            border: "1px solid Gray",
	            width: "18px",
	            height: "18px",
	            textAlign: "center",
	            lineHeight: "16px",
	            cursor: "pointer",
	            borderRadius: "12px",
	            fontFamily: "微软雅黑"
	        });
	 
	        $("#mb_btnbox").css({ margin: "15px 0px 10px 0", textAlign: "center" });
	        $("#mb_btn_ok,#mb_btn_no").css({
	            width: "80px",
	            height: "30px",
	            color: "white",
	            border: "none",
	            borderRadius: "4px"
	        });
	        $("#mb_btn_ok").css({ backgroundColor: "#b53131" });
	        $("#mb_btn_no").css({ backgroundColor: "gray", marginRight: "40px" });
	 
	 
	        //右上角关闭按钮hover样式  
	        $("#mb_ico").hover(function() {$(this).css({ backgroundColor: "Red", color: "White" });},
	            function() {$(this).css({ backgroundColor: "#DDD", color: "black" });});
	 
	        var width = document.documentElement.clientWidth; //屏幕宽  
	        var height = document.documentElement.clientHeight; //屏幕高  
	 
	        var boxWidth = $("#mb_con").width();
	        var boxHeight = $("#mb_con").height();
	 
	        //让提示框居中  
	        $("#mb_con").css({ top: (height - boxHeight) / 2 + "px", left: (width - boxWidth) / 2 + "px" });
	    }
	};
</script>

